<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-lit</title>
</head>
<body>
    <my-component></my-component>
</body>
<script type="module">
    import { defineComponent,reactive,html,onMounted,onUpdated,onUnmounted} from './lit.js';
    defineComponent("my-component",() => {
        const state = reactive({
            text:"hello",
            show:true
        });
        const toggle = () => state.show = !state.show;
        const onInput = e => state.text = e.target.value;
        return () => html`
            <button @click=${toggle}>toggle child</button>
            <p>
                ${state.text} <input value=${state.text} @input=${onInput}>
            </p>
            ${  state.show ? html`<my-child msg=${state.text}></my-child>` : ``}
        `
    });
    defineComponent("my-child",['msg'],props => {
        const state = reactive({ count: 0 })
        const increase = () => {
          state.count++
        }
        onMounted(() => {
          console.log('child mounted')
        })
        onUpdated(() => {
          console.log('child updated')
        })
        onUnmounted(() => {
          console.log('child unmounted')
        })
        return () => html`
          <p>${props.msg}</p>
          <p>${state.count}</p>
          <button @click=${increase}>increase</button>
        `
    })
</script>
</html>